<template>
  <div class="coursesStore">
    <div class="coursesList">
      <!-- <div v-for="(item, index) in coursesData" :key="index"> -->
      <!-- <h2>{{ item.cName }}</h2> -->
      <div class="searchInput">
        <el-input placeholder="输入课程名称/设计老师姓名" v-model="search" class="input-with-select">
          <el-button slot="append" icon="iconfont iconsearch"></el-button>
        </el-input>
      </div>
      <div v-if="!courses.length">暂无课程</div>
      <el-row class="item-list">
        <el-col :xs="11" :sm="7" :md="7" :lg="5" :xl="5" v-for="(citem, cindex) in filterCourse" :key="cindex"
          class="coursesContent hover_boxShadow_defaut_shadow" :class="{
          twoisLast: !((cindex + 1) % 2),
          treeisLast: !((cindex + 1) % 3),
          fourisLast: !((cindex + 1) % 4),
        }" :title="citem.name">
          <router-link :to="{
          name: 'store_browseDetail',
          query: {
            courseId: citem.courseID,
            currNo: citem.currNo,
          },
        }">
            <div class="continueLabel" v-if="citem.isContinuousPublish">
              <span class="content">持续发布</span>
            </div>
            <div class="coursesImg">
              <img v-lazy="citem.iconPath" />
            </div>
            <div class="courseInfo">
              <div class="name">
                {{ citem.name || "【缺课程名称】" | filterName }}
              </div>
              <!-- <div class="pushTime">{{ `任务总数${citem.taskTotal}` }}</div> -->
              <div class="desc">
                设计：{{ citem.designerNameList || filterUserName(citem.mainDesignerUserID) || "【设计师】" }}
              </div>
              <!-- <div class="desc">简介：{{ citem.description || "无" }}</div> -->
              <div class="desc">
                发布时间：{{ citem.publishTime || "【发布时间】" | filterTime }}
              </div>
            </div>
            <div class="openBtnBox">
              <span @click.stop.prevent="handelOpenCourse(citem)" v-if="getTeacherRole">我要开课</span>
              <span>查看课程</span>
            </div>
          </router-link>
        </el-col>
      </el-row>
      <!-- </div> -->
      <setCourseInfo :isShow.sync="isShow" :courseData="courseData" :isOpen="true" />
    </div>
  </div>
</template>

<script>
import { getCourselist } from "@/request/courses";
import { mapState } from "vuex";
import { location, currTime, toMs } from "@/util/tool";
import setCourseInfo from "@/views/coursesStore/list/component/setCourseInfo";
export default {
  components: {
    setCourseInfo,
  },
  data() {
    return {
      src: [],
      search: "",
      // coursesData: [],
      courseData: {}, // 发布课程的数据
      // 输入框搜索的数据
      restaurants: [],
      location: location(window),
      isShow: false,
    };
  },
  watch: {
    // // 监听开始选课时间 是否大于课程结束选课时间 如果大于则清空结束选课时间
    // "ruleForm.chooseTime": function (n, o) {
    //   if (
    //     this.ruleForm.chooseTime &&
    //     this.ruleForm.lastChooseTime &&
    //     new Date(this.ruleForm.chooseTime).getTime() >
    //       new Date(this.ruleForm.lastChooseTime).getTime()
    //   ) {
    //     this.ruleForm.lastChooseTime = "";
    //   }
    // },
    // "ruleForm.lastChooseTime": function (n, o) {
    //   if (
    //     this.ruleForm.chooseTime &&
    //     this.ruleForm.lastChooseTime &&
    //     new Date(this.ruleForm.chooseTime).getTime() >
    //       new Date(this.ruleForm.lastChooseTime).getTime()
    //   ) {
    //     this.ruleForm.lastChooseTime = "";
    //   }
    // },
    // // 监听预计开课时间 是否大于预计结课时间 如果大于则清空预计结课时间
    // "ruleForm.startTeachingTime": function (n, o) {
    //   if (
    //     this.ruleForm.startTeachingTime &&
    //     this.ruleForm.finishTeachingTime &&
    //     new Date(this.ruleForm.startTeachingTime).getTime() >
    //       new Date(this.ruleForm.finishTeachingTime).getTime()
    //   ) {
    //     this.ruleForm.finishTeachingTime = "";
    //   }
    // },
    // "ruleForm.finishTeachingTime": function (n, o) {
    //   if (
    //     this.ruleForm.startTeachingTime &&
    //     this.ruleForm.finishTeachingTime &&
    //     new Date(this.ruleForm.startTeachingTime).getTime() >
    //       new Date(this.ruleForm.finishTeachingTime).getTime()
    //   ) {
    //     this.ruleForm.finishTeachingTime = "";
    //   }
    // },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      userList: (state) => state.user.userList,
      courses: (state) => state.courses.courses?.reverse()
    }),
    filterCourse() {
      let fCourse = this.courses

      if (this.search) {
        let newCourse = [];
        fCourse.forEach((item) => {
          if (item.name.split("_")[0].indexOf(this.search) !== -1) {
            newCourse.push(item);
          }
          if (item.designerNameList && item.designerNameList.indexOf(this.search) !== -1) {
            newCourse.push(item);
          }
        });
        return newCourse;
      } else {
        return fCourse;
      }
    },
    filterUserName: () => {
      return function (val) {
        const findUser = this.userList.find(item => item.userID === val)
        return !findUser ? val : findUser.realName || findUser.nickName || findUser.email || findUser.regName;
      }
    },
    getTeacherRole() {
      return this.userInfo?.authNum ? this.userInfo.authNum.indexOf(2) !== -1 : false
    }
    // // 开始日期限制
    // startPickerOptions() {
    //   let that = this;
    //   //设置时间选择器的禁用时间
    //   return {
    //     disabledDate(time) {
    //       if (that.ruleForm.lastChooseTime) {
    //         return (
    //           // time.getTime() >
    //           //   new Date(that.ruleForm.lastChooseTime).getTime() ||
    //           time.getTime() < Date.now() - 86400000
    //         ); // 限制不能超过截至日期
    //       } else {
    //         // 因为大于当前时间 所以今天不能选 减去一天的时间即可
    //         return time < Date.now() - 86400000;
    //       }
    //     },
    //     selectableRange: `${currTime(new Date())} - 23:59:59`,
    //   };
    // },
    // // 结束日期限制
    // lastPickerOptions() {
    //   let that = this;
    //   //设置时间选择器的禁用时间
    //   return {
    //     disabledDate(time) {
    //       if (that.ruleForm.chooseTime) {
    //         return (
    //           time.getTime() <
    //             new Date(that.ruleForm.chooseTime).getTime() - 86400000 ||
    //           time.getTime() < Date.now() - 86400000
    //         ); // 限制不能超过截至日期
    //       } else {
    //         // 因为大于当前时间 所以今天不能选 减去一天的时间即可
    //         return time < Date.now() - 86400000;
    //       }
    //     },
    //     selectableRange: `${
    //       this.watchStartTime
    //         ? this.m(this.watchStartTime) < this.m(this.watchClooseTime)
    //           ? `00:00:00`
    //           : currTime(this.watchStartTime)
    //         : currTime(new Date())
    //     } - 23:59:59`,
    //   };
    // },
    // // 预计开课时间
    // startTeachingTimetPickerOptions() {
    //   let that = this;
    //   //设置时间选择器的禁用时间
    //   return {
    //     disabledDate(time) {
    //       if (that.ruleForm.finishTeachingTime) {
    //         return (
    //           // time.getTime() >
    //           //   new Date(that.ruleForm.finishTeachingTime).getTime() ||
    //           time.getTime() < Date.now() - 86400000
    //         ); // 限制不能超过截至日期
    //       } else {
    //         // 因为大于当前时间 所以今天不能选 减去一天的时间即可
    //         return time < Date.now() - 86400000;
    //       }
    //     },
    //     selectableRange: `${currTime(new Date())} - 23:59:59`,
    //   };
    // },
    // // 预计结课时间
    // finishTeachingTimePickerOptions() {
    //   let that = this;
    //   //设置时间选择器的禁用时间
    //   return {
    //     disabledDate(time) {
    //       if (that.ruleForm.startTeachingTime) {
    //         return (
    //           time.getTime() <
    //             new Date(that.ruleForm.startTeachingTime).getTime() -
    //               86400000 || time.getTime() < Date.now() - 86400000
    //         ); // 限制不能超过截至日期
    //       } else {
    //         // 因为大于当前时间 所以今天不能选 减去一天的时间即可
    //         return time < Date.now() - 86400000;
    //       }
    //     },
    //     selectableRange: `${
    //       this.watchStartTeachingTime
    //         ? this.m(this.watchStartTeachingTime) <
    //           this.m(this.watchFinishTeachingTime)
    //           ? `00:00:00`
    //           : currTime(this.watchStartTeachingTime)
    //         : currTime(new Date())
    //     } - 23:59:59`,
    //   };
    // },
    // watchStartTime() {
    //   return this.ruleForm.chooseTime;
    // },
    // watchClooseTime() {
    //   return this.ruleForm.lastChooseTime;
    // },
    // watchStartTeachingTime() {
    //   return this.ruleForm.startTeachingTime;
    // },
    // watchFinishTeachingTime() {
    //   return this.ruleForm.finishTeachingTime;
    // },
  },
  filters: {
    filterName(value) {
      return value.substring(
        0,
        value.lastIndexOf("_") == -1 ? value.length : value.lastIndexOf("_")
      );
    },
    filterTime(val) {
      const time = new Date(val);
      if (time == "Invalid Date") return val;
      return `${time.getFullYear()}-${time.getMonth() + 1
        }-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`;
    },
  },
  created() {
    if (!this.userList.length && this.getTeacherRole) this.$store.dispatch("user/getUserList")
    this.fetchCoursesList();
  },
  methods: {
    // 返回毫秒
    m(t) {
      return new Date(t).getTime();
    },
    // 获取所有课程
    fetchCoursesList() {
      this.$store.dispatch("courses/fetchCourses")
      // getCourselist().then((data) => {
      //   // if (res.errno === 0) {
      //   this.coursesData = data?.reverse() || [];
      //   // }
      // });
    },
    // // 关闭弹窗
    // handelClsoe() {
    //   this.isShow = false
    // },
    // 开设课程
    handelOpenCourse(item) {
      this.courseData = item;
      this.isShow = true;
    },

    // 输入时匹配输入的内容
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 将输入的参数过滤
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    // 加载输入框的选择数据
    // loadAll() {
    //   return [
    //     { value: "张老师", address: "", userID: 1 },
    //     { value: "李老师", address: "", userID: 1 },
    //     { value: "王老师", address: "", userID: 1 },
    //     { value: "刘老师", address: "", userID: 1 },
    //     { value: "何老师", address: "", userID: 1 },
    //   ];
    // },
  },
  mounted() {
    // this.restaurants = this.loadAll();
  },
};
</script>

<style lang="stylus" scoped>
.coursesStore {
  padding-top: 30px;
  margin: 0 auto;
  max-width: 1200px;
 .searchInput {
  margin:15px;
        width: 309px;
        height: 36px;
      }
  .coursesList {
    .item-list {
      display: flex;
      flex-flow: wrap;

      @media only screen and (min-width: 1200px) {
        .el-col-lg-5 {
          margin-right: calc(((1200px - (273px * 4)) / 3));
          margin-bottom: 25px;
        }

        .fourisLast {
          margin: 0;
        }
      }

      @media only screen and (max-width: 1200px) and (min-width: 768px) {
        .el-col-md-7 {
          margin-right: calc((calc(100%) / 3 / 3 / 2));
          margin-bottom: 25px;
        }

        .coursesContent {
          max-width: 273px;

          .coursesImg {
            img {
              width: 100% !important;
            }
          }
        }

        .treeisLast {
          margin: 0;
        }
      }

      @media only screen and (max-width: 767px) {
        .el-col-xs-11 {
          margin-right: calc((calc(100%) / 2 / 2 / 2 / 1.5));
          margin-bottom: 20px;
        }

        .twoisLast {
          margin-right: 0 !important;
        }
      }

      .coursesContent {
        padding: 11px 14px 0 15px;
        margin-bottom: 25px;
        position: relative;
        cursor: pointer;
        width: 273px;
        height: 317px;
        background-color: #ffffff;
        // box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.16);
        border-radius: 5px;
        overflow: hidden;
        transition: all 0.2s linear;

        .coursesImg {
          line-height: 0;

          img {
            object-fit: cover;
            width: 244px;
            height: 156px;
            border-radius: 5px;
          }
        }

        .courseInfo {
          .name {
            margin-top: 15px;
            font-family: PMingLiU-ExtB;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }

          .pushTime {
            margin-top: 5px;
            font-family: PMingLiU-ExtB;
            font-size: 12px;
            color: #999999;
          }

          .desc {
            margin-top: 2px;
            font-family: PMingLiU-ExtB;
            font-size: 14px;
            color: #666666;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }

        .openBtnBox {
          display: flex;
          justify-content: space-between;
          position: absolute;
          bottom: 0;
          right: 0;
          left: 0;
          width: 273px;
          height: 35px;
          line-height: 35px;
          border-top: 1px solid #d3dae4;
          border-radius: 0px 0px 5px 5px;
          text-align: center;
          font-family: PMingLiU-ExtB;
          font-size: 16px;
          color: #666;
          transition: all 0.2s linear;
          span {
            flex: 1;
          }
          span:hover {
            background: #1c4e93;
            color: #fff;
          }
        }


        .continueLabel {
          top: -15px;
          right: 0px;
          width: 145px;
          height: 145px;
          position: absolute;
          overflow: hidden;

          .content {
            top: 25px;
            right: -70px;
            transform: rotate(45deg);
            display: inline-block;
            text-align: center;
            width: 200px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            z-index: 2;
            color: #fff;
            overflow: hidden;
            box-shadow: 0 0 1px 1px #035386;
            background: #035386;
          }
        }
      }
    }
  }
}

.autocompletePopper-teacherName {
  top: 332px !important;
  border: solid 1px #d6d6d6;

  .el-scrollbar__view {
    padding: 0 6px 0 4px;

    li {
      padding: 0 3px;
      height: 25px;
      line-height: 25px;
      border-radius: 5px;
    }

    li:hover {
      background-color: #fff6e1;
    }
  }
}

.OpenCoursepickerTime {
  .el-scrollbar__view::before, .el-scrollbar__view::after {
    height: 72px;
  }
}

.day_timePicker {
  .el-time-spinner__list::after, .el-time-spinner__list::before {
    height: 72px;
  }
}
</style>